<template>
  <div class="page-common-layout">
    <div class="page-common-left" style="width:600px">
      <data-grid
        ref="masterList"
        type="master"
        :columns="masterColumns"
        :url="url"
        :queryParam="masterQueryParam"
        rowKey="uuid"
        showPagination="auto"
        :showRowSelect="false"
        @rowClick="
          (e) => {
            masterRowClick(e, { classifyUuid: 'uuid' });
          }
        "
      >
				<span slot="renderPortalStatus" slot-scope="{ text, record }">
					<a-switch size="small" :checked="text == 'true'?true:false" @change="(e) => portalStateChange(e,record)" />
				</span>
      </data-grid>
    </div>
    <div class="page-common-content">
      <tool-bar
        @search="$refs.table.refresh(true)"
        @reset="
          () => {
            (this.queryParam = {}), $refs.table.refresh(true);
          }
        "
      >
        <template slot="toolBtn" slot-scope="scope">
          <a-button
            class="cu-btn-primary"
            icon="plus"
            @click="handleAdd('sub')"
            v-action:sysPortalTemplateAddDialog
            >{{$ct('add','新增')}}</a-button
          >
          <!-- <a-button
                class="cu-btn-default"
                icon="edit"
                @click="handleEdit($refs.subList.rows, 'sub')"
                v-action:sysPortalTemplateEditDialog
                >编辑</a-button
              > -->
          <a-button
            class="cu-btn-danger"
            icon="delete"
            @click="handleSub($refs.subList.selectedRowKeys, 'sub')"
            v-action:sysPortalTemplateDelDialog
            >{{$ct('delete','删除')}}</a-button
          >
        </template>
      </tool-bar>
      <data-grid
        ref="subList"
        type="sub"
        :url="url"
        :columns="subColumns"
        :queryParam="subQueryParam"
        rowKey="uuid"
        showPagination="auto"
      >
        <span slot="renderPortalStatus" slot-scope="{ text, record, index }">
          <a-tag v-if="text == '启用'" :color="'blue'">
            {{ text }}
          </a-tag>
          <a-tag v-else-if="text == '禁用'" :color="'orange'">
            {{ text }}
          </a-tag>
        </span>
        <span slot="renderAction" slot-scope="{ text, record }">
          <a @click="handleEdit(record, 'sub')">{{$ct('edit','编辑')}}</a>
          <!-- <a-divider v-if="record.templateType == '自建'" type="vertical" /> -->
					<span v-if="record.templateType == '自建'" class="action-margin"></span>
          <template>
            <a
              v-if="record.templateType == '自建'"
              @click="handleDesign(record)"
              >{{$ct('design','设计')}}</a
            >
						<span v-if="record.templateType == '自建'" class="action-margin"></span>
            <!-- <a-divider v-if="record.templateType == '自建'" type="vertical" /> -->
            <a
              v-if="record.templateType == '自建'"
              @click="handlePreview(record)"
              >{{$ct('preview','预览')}}</a
            >
						<span v-if="record.templateType == '自建'" class="action-margin"></span>
            <!-- <a-divider v-if="record.templateType == '自建'" type="vertical" /> -->
            <a
              v-if="record.templateType == '自建'"
              @click="handleSub(record, 'sub')"
							class="action-delete"
              >{{$ct('delete','删除')}}</a
            >
          </template>
        </span>
      </data-grid>
      <sub-form
        ref="subModal"
        :visible="subVisible"
        :loading="subConfirmLoading"
        :model="subMdl"
        @cancel="handleCancel('sub')"
        @ok="handleOk('sub')"
      />
      <design-modal
        ref="designModal"
        :visible="visibleDesign"
        :templateUuid="templateUuid"
        :templateRecord="templateRecord"
        @ok="handleSave()"
        @cancel="
          () => {
            visibleDesign = false;
          }
        "
      ></design-modal>
      <preview-modal ref="previewModal" :data="jsonData"></preview-modal>
    </div>
  </div>
</template>

<script>
import { masterTableMixin } from "@/mixins/masterTableMixin";

import { DataGrid } from "@/components";
import subForm from "./edit.vue";
import designModal from "./designModal.vue";
import previewModal from "@/components/TopVUI/k-portal-design/preview/index";

const masterColumns = [
  {
    title: "分类名",
    align: "center",
    width: 120,
    dataIndex: "classifyName",
  },
  {
    title: "标识",
    align: "center",
    dataIndex: "classifyCode",
		langCode: "identification",
    sorter: true,
  },
  {
    title: "开启门户",
    align: "center",
    dataIndex: "portalStatus",
		langCode: "openThePortal",
		fixed: "right",
		scopedSlots: {
		  customRender: "renderPortalStatus"
		}
  }
];
const subColumns = [
  {
		title: "模板名称",
		dataIndex: "templateName"
	},
  {
		title: "模板类型",
		dataIndex: "templateType",
		sorter: true
	},
  {
		title: "创建人",
		width: 120,
		dataIndex: "creator",
		langCode: "createdBy",
	},
  {
    title: "创建时间",
    width: 150,
    dataIndex: "createTime",
    sorter: true,
  },
  {
    title: "操作",
    width: 200,
    dataIndex: "action",
    align: "center",
    scopedSlots: {
      customRender: "renderAction",
    },
  },
];
export default {
  name: "TableList",
  mixins: [masterTableMixin],
  components: {
    DataGrid,
    subForm,
    designModal,
    previewModal,
  },
  data() {
    return {
      masterColumns: masterColumns,
      subColumns: subColumns,
      // create model
      masterVisible: false,
      subVisible: false,
      masterConfirmLoading: false,
      subConfirmLoading: false,
      masterMdl: null,
      subMdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      masterQueryParam: {},
      subQueryParam: {},
      masterSelectedRows: [],
      subSelectedRows: [],
      masterRows: "",
      subRows: "",
      jsonData: {},
      url: {
        masterList: "/system/sysPortalClassify/getPageSet",
        subList: "/system/sysPortalTemplate/getPageSet",
        subDelete: "/system/sysPortalTemplate/deleteBatch",
        subAdd: "/system/sysPortalTemplate/save",
        subUpdate: "/system/sysPortalTemplate/update",
      },
      visibleDesign: false,
      visiblePreview: false,
      templateUuid: "",
      templateRecord: {},
    };
  },
  methods: {
    masterRowClick(record, index, param) {
      this.masterRows = record;
      this.masterMdl = record;
      this.subQueryParam = { templateClassiftCode: record.classifyCode };
      this.subMdl = { templateClassiftCode: record.classifyCode };
      this.$refs.subList.refresh();
    },
    handleDesign(val) {
      this.visibleDesign = true;
      this.templateUuid = val.uuid;
      this.templateRecord = val;
      this.$refs.designModal.getDesignData(val);
    },
    handlePreview(val) {
      this.$refs.previewModal.jsonData = val.templateJsonData
        ? JSON.parse(val.templateJsonData)
        : {};
      this.$refs.previewModal.visible = true;
    },
    handleSave() {
      this.visibleDesign = false;
      this.$refs.subList.refresh();
    },
		portalStateChange(value,record){
			event.stopPropagation()
			let param = {
				uuid: record.uuid,
				portalStatus: value
			}
			this.$post("/system/sysPortalClassify/update",param).then((res) => {
				if(res.statusCode === 200){
					this.$message.success(res.message, 1.5)
					this.$refs.masterList.refresh()
				}else{
					this.$message.warn(res.message, 1.5)
				}
			})
		}
  },
};
</script>

<style lang="less"></style>
